<script setup>
import {saveApi} from "@/api/EmpApi";
import MyForm from "@/components/MyForm.vue";
import {onMounted, shallowReactive, shallowRef} from "vue";
import {RULE} from "@/const";
import MyNav from "@/components/MyNav.vue";
import router from "@/router";
import {listApi} from "@/api/DeptApi";
import {getResponseData} from "@/util";

// 所在部门下拉菜单选项
let optionItems = [];

// 表单项
let items = shallowRef([
  {'label': '登录账号', 'prop': 'username', 'required': true},
  {'label': '登录密码', 'prop': 'password', 'required': true},
  {'label': '手机号码', 'prop': 'phone', 'required': true},
  {'label': '微信号码', 'prop': 'wechat', 'required': true},
  {'label': '电子邮件', 'prop': 'email', 'required': true},
  {'label': '真实姓名', 'prop': 'realname', 'required': true},
  {'label': '身份证号', 'prop': 'idcard', 'required': true},
  {
    'label': '所在部门', 'prop': 'fkDeptId', 'type': 'select',
    'optionItems': optionItems, 'required': true
  },
  {'label': '入职日期', 'prop': 'hiredate', 'type': 'date', 'required': true},
  {'label': '员工描述', 'prop': 'info', 'type': 'textarea'},
  {'label': '详细地址', 'prop': 'address', 'type': 'textarea'},
]);
// 表单默认值
let data = shallowReactive({});
// 表单规则
let rules = {
  'username': RULE.USERNAME,
  'password': RULE.PASSWORD,
  'realname': RULE.REALNAME,
  'phone': RULE.PHONE,
  'idcard': RULE.IDCARD,
  'info': RULE.COMMON_INFO,
};

/* ==================== 查询全部的部门记录 ==================== */
async function listDept() {
  let res = await listApi();
  let depts = getResponseData(res);
  Object.values(depts).forEach(dept => {
    optionItems.push({'label': dept['title'], 'value': dept['id']});
  });
}

/* ==================== 加载函数 ==================== */
onMounted(() => listDept());

</script>

<template>

  <my-nav :items="[
    {'icon': 'User', 'label': '员工管理'},
    {'icon': 'User', 'label': '员工列表', 'url': '/ums/Emp'},
    {'icon': 'User', 'label': '添加员工'},
  ]"/>

  <el-divider/>
  <my-form v-if="optionItems" type="insert"
           :items="items"
           :data="data"
           :rules="rules"
           :api="saveApi"
           :fn="() => router.push('/ums/Emp')"
           :span="2"/>

</template>

<style scoped lang="scss">

</style>